<template>
  <div class="index">
    <head-text titleText="餐饮分类配置"></head-text>
    <div class="list-content">
      <div class="filter-area">
        <div class="operate-area">
          <el-button @click="add" plain type="success" size="mini"
            >添加分类</el-button
          >
        </div>
      </div>
      <div class="table-title">
        <span></span>
        <h5>餐饮分类配置列表</h5>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        size="mini"
        v-if="hackReset"
      >
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="categoryName"
          label="餐饮分类名称"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item icon-tooltip"
              placement="top"
              content="升序"
            >
              <i
                class="el-icon-top icon-defined"
                style="margin: 5px"
                @click="ascSort(scope.row.id, 'asc', scope.$index)"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item icon-tooltip"
              placement="top"
              content="降序"
            >
              <i
                class="el-icon-bottom icon-defined"
                style="margin: 5px"
                @click="descSort(scope.row.id, 'desc', scope.$index)"
              ></i>
            </el-tooltip>
            <el-button
              type="primary"
              style="margin: 5px"
              plain
              size="mini"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              style="margin: 5px"
              plain
              size="mini"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <page
        :nowPage="nowPage"
        :total="total"
        :limit="limit"
        @pageChange="onPageChange"
        @sizeChange="onSizeChange"
      />
    </div>
    <dialog-com :dialogObj="dialogObj" @reflash="getList"></dialog-com>
  </div>
</template>

<script>
import headText from "@c/headText";
import page from "@c/page";
import dialogCom from "./dialogCom";

import {
  getProductcategoryApi,
  deleteProductcategoryApi,
  sortProductcategoryApi
} from "@s/api";
export default {
  name: "index",
  data() {
    return {
      nowPage: 1,
      total: 0,
      limit: 10,
      hackReset: true,
      dialogObj: {
        id: "",
        title: "",
        show: false,
        form: {}
      },
      tableData: []
    };
  },
  components: {
    headText,
    dialogCom,
    page
  },
  mounted() {
    this.getList();
  },
  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    getList() {
      var json = {
        page: this.nowPage,
        limit: this.limit,
        categoryType: 1 // 1是餐饮
      };
      getProductcategoryApi(json).then(res => {
        this.hackReset = false;
        this.$nextTick(() => {
          this.tableData = res.list;
          this.total = res.total;
          this.hackReset = true;
        });
      });
    },
    add() {
      this.dialogObj.id = "";
      this.dialogObj.show = true;
      this.dialogObj.title = "添加分类";
    },
    edit(v) {
      this.dialogObj.id = v.id;
      this.dialogObj.show = true;
      this.dialogObj.title = "编辑分类";
      this.dialogObj.form = v;
    },
    ascSort(id, sort, i) {
      if (i == 0) {
        this.$message({
          type: "warning",
          message: "已经是第一位啦！"
        });
      } else {
        this.$confirm("此操作将对该分类进行升序?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.sort(id, sort);
        });
      }
    },
    descSort(id, sort, i) {
      if (i == this.tableData.length - 1) {
        this.$message({
          type: "warning",
          message: "已经是最后一位啦！"
        });
      } else {
        this.$confirm("此操作将对该分类进行降序?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.sort(id, sort);
        });
      }
    },
    sort(id, sort) {
      let json = {
        id: id,
        orderType: sort
      };
      sortProductcategoryApi(json).then(() => {
        this.getList();
        this.$message({
          type: "success",
          message: "操作成功！"
        });
      });
    },
    del(id) {
      this.$confirm("此操作将删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let json = [id];
        deleteProductcategoryApi(json).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功！"
          });
        });
      });
    }
  }
};
</script>
<style scoped lang="scss"></style>
